<template>
  <view class="enterprise">
    <view class="enterprise-title">我管理的店铺</view>
    <view class="e-ul">
      <u-swipe-action
        v-for="(item, index) in enterprise_list"
        :key="index"
        :index="index"
        :show="swipeIndex === index"
        @open="swipeIndex = index"
        @close="swipeIndex = null"
        :options="swipeOptions"
        @click="editEnterprise(item)"
      >
        <view class="e-li clearfix" @click="goShop(item)">
          <view class="float_left"
            ><image :src="item.logo" mode="aspectFill"></image
          ></view>
          <view class="float_left en-info">
            <view class="en-name">{{ item.enterpriseName }}</view>
            <view class="en-time"
              >有效期: {{ $u.timeFormat(item.expireTime) }}</view
            >
          </view>
          <view class="status-r">
            <u-tag
              v-if="item.expireStatus"
              text="已打烊"
              size="mini"
              mode="plain"
              type="info"
            />
            <u-tag
              v-else
              text="营业中"
              size="mini"
              mode="plain"
              type="success"
            />
            <text class="custom-icon custom-icon-jinru"></text>
          </view>
        </view>
      </u-swipe-action>
      <u-loadmore status="nomore" />
    </view>
    <view class="submit-btn" @click="logout"
      ><view class="btn-min">切换登录账号</view></view
    >
    <view style="position: fixed; right: 40rpx; bottom: 140rpx; z-index: 999">
      <button
        type="primary"
        style="
          border-radius: 50rpx;
          padding: 0 40rpx;
          background-color: #fb5904;
        "
        @click="goCreateEnterprise"
      >
        创建企业
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      enterprise_list: [],
      swipeIndex: null, // 当前打开的侧滑项索引
      swipeOptions: [
        // { text: "编辑", style: { background: "#fb5904", color: "#fff" } },
      ],
    };
  },
  onLoad() {
    this.getAllEnterprise();
  },
  methods: {
    // 获取企业列表
    getAllEnterprise() {
      this.$u.api.getAllEnterprise().then((res) => {
        this.enterprise_list = res.data;
      });
    },
    // 切换登录账号（退出登录）
    logout() {
      uni.clearStorageSync();
      this.$store.commit("commit_hasLogin", false);
      this.goPage("/pages/login/index", "reLaunch");
    },
    // 创建企业
    goCreateEnterprise() {
      this.goPage("/pagesB/enterprise/CreateStore", "navigateTo");
    },
    // 进入企业
    async goShop(row) {
      this.$store.commit("commit_enToken", row.token);
      this.$store.commit("commit_enterprise", row);
      await this.getAclList(row.roleType);
      await this.getStaffByToken(row.roleType);
      this.goPage("/pages/index/index", "switchTab");
    },
    // 获取登录权限
    async getAclList(roleType) {
      await this.$u.api.getAclList(roleType).then((res) => {
        this.$store.commit("commit_access", res.data);
      });
    },
    async getStaffByToken(roleType) {
      await this.$u.api.getStaffByToken(roleType).then((res) => {
        this.$store.commit("commit_userInfo", res.data);
      });
    },
    // 编辑企业
    editEnterprise(item) {
      this.goPage(
        `/pagesB/enterprise/CreateStore?id=${item.enterpriseId}`,
        "navigateTo"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.enterprise {
  padding-bottom: 140rpx;
  .enterprise-title {
    font-size: 24rpx;
    font-weight: 600;
    line-height: 80rpx;
    padding: 0 25rpx;
  }
  .e-ul {
    .e-li {
      width: 700rpx;
      margin: 0 auto 20rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      padding: 20rpx;
      position: relative;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
        margin-right: 20rpx;
      }
      .en-info {
        .en-name {
          padding-top: 10rpx;
          font-weight: 700;
        }
        .en-time {
          padding-top: 10rpx;
          font-size: 22rpx;
          color: #999999;
        }
      }
      .status-r {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20rpx;
        height: 100%;
        align-items: center;
        display: flex;
        .custom-icon {
          vertical-align: middle;
          margin-left: 10rpx;
          color: #333333;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
